import { computed, ref, watch } from 'vue'
import { defineStore } from 'pinia'
import { getStorageSync, setStorageSync } from '@dcloudio/uni-h5'
export const useThemeStore = defineStore('theme', () => {

  let currentTheme = ref(0)
  const themeList = [
    { name: 'light', color: '#7ccca2', text:'#black' }, 
    { name: 'dark', color: '#3621ac', text:'#fff' }
  ]
  const theme = computed(() =>{
    return getStorageSync('theme') ||themeList[currentTheme.value]
  })

  const changeTheme = () => {
    console.log(1);
    currentTheme.value === 0 ? currentTheme.value = 1 : currentTheme.value = 0
  }
  
  watch( currentTheme, (newVal) => {
    setStorageSync('theme', newVal)
    const local = getStorageSync('theme')
    console.log(newVal, themeList[local]);
    document.documentElement.style.setProperty(
      "--default-color",
      themeList[local].color,
    );
    document.documentElement.style.setProperty(
      "--text-color",
      themeList[local].text,
    );

  }, {
    immediate: true
  })

 return {theme,changeTheme }
})